<!-- + -->
<template>
  <div class="searchForm">
    <a-form layout="inline">
      <a-form-item label="名称">
        <a-input v-model:value="forms.keyName" />
      </a-form-item>
      <a-form-item label="创建时间">
        <a-range-picker
          v-model:value="createTimeValue"
          :inputReadOnly="true"
          @change="selectCreateTimes"
        />
      </a-form-item>
      <a-form-item label="修改时间">
        <a-range-picker
          v-model:value="updataTimeValue"
          :inputReadOnly="true"
          @change="selectUpdataTimes"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" size="small" @click="getKeyLists">
          查询
        </a-button>
      </a-form-item>
    </a-form>
  </div>
  <div class="keyLists">
    <a-table
      size="small"
      :data-source="tableSourceData.records"
      :scroll="{ x: 500, y: 500 }"
      :pagination="{
        showSizeChanger: true,
        total: tableSourceData.total,
        position: ['bottomRight'],
        current: tableSourceData.current,
        defaultPageSize: tableSourceData.size,
        pageSize: tableSourceData.size,
      }"
      :columns="columns"
      @resizeColumn="handleResizeColumn"
      @change="changePageSizes"
      :loading="spinning"
      bordered
    >
      <template #bodyCell="{ column, record }">
        <!--解析字典-->
        <template v-if="column.dataIndex == 'dataType'">
          {{ data_type[record.dataType] }}
        </template>
        <template v-if="column.dataIndex == 'operationType'">
          {{ operationt_type[record.operationType] }}
        </template>
        <template v-if="column.dataIndex == 'dataDealWay'">
          {{ data_deal_way[record.dataDealWay] }}
        </template>
        <!--操作-->
        <template v-if="column.key == 'action'">
          <a-button type="primary" @click="bindKey(record)" size="small" ghost>
            关联
          </a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { listKeyData, generalDict } from '@/network/api/index';
export default {
  emits: ['bindKey'],
  components: {},
  data() {
    return {
      spinning: false,
      createTimeValue: [],
      updataTimeValue: [],
      forms: {
        keyName: '',
        stateDate: '',
        lastDate: '',
        updateTimeStart: '',
        updateTimeEnd: '',
        pageSize: 10,
        currPage: 1,
      },
      columns: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'keyName',
          width: 150,
          resizable: true,
          fixed: 'left',
        },
        {
          title: '类型',
          align: 'center',
          resizable: true,
          width: 150,
          dataIndex: 'typeName',
        },
        {
          title: '寄存器类型',
          resizable: true,
          width: 150,
          align: 'center',
          dataIndex: 'registerName',
        },
        {
          title: '寄存器子类型',
          resizable: true,
          width: 150,
          align: 'center',
          dataIndex: 'registerSubTypeName',
        },
        {
          title: 'key值',
          resizable: true,
          width: 150,
          align: 'center',
          dataIndex: 'keyValue',
        },
        {
          title: '数据类型',
          resizable: true,
          align: 'center',
          width: 150,
          dataIndex: 'dataType',
        },
        {
          title: '计算基数',
          resizable: true,
          width: 80,
          align: 'center',
          dataIndex: 'calculateCardinality',
        },
        {
          title: '操作类型',
          align: 'center',
          resizable: true,
          width: 150,
          dataIndex: 'operationType',
        },
        {
          title: '数据处理方式',
          resizable: true,
          width: 150,
          align: 'center',
          dataIndex: 'dataDealWay',
        },
        {
          title: '传感器类型',
          resizable: true,
          align: 'center',
          width: 150,
          dataIndex: 'registerName',
        },
        {
          title: '最大值',
          resizable: true,
          align: 'center',
          width: 80,
          dataIndex: 'maxValue',
        },
        {
          title: '最小值',
          resizable: true,
          width: 80,
          align: 'center',
          dataIndex: 'minValue',
        },
        {
          title: '单位',
          resizable: true,
          align: 'center',
          width: 80,
          dataIndex: 'unit',
        },
        {
          title: '创建时间',
          resizable: true,
          width: 150,
          align: 'center',
          dataIndex: 'createTime',
        },
        {
          title: '修改时间',
          align: 'center',
          width: 150,
          resizable: true,
          dataIndex: 'updateTime',
        },
        {
          title: '备注',
          width: 150,
          align: 'center',
          resizable: true,
          dataIndex: 'remark',
        },
        {
          title: '操作',
          key: 'action',
          width: 100,
          align: 'center',
          fixed: 'right',
        },
      ],
      tableSourceData: {},
      data_type: {},
      operationt_type: {},
      data_deal_way: {},
    };
  },
  mounted() {
    this.getKeyLists();
    this.getDict('data_type').then((data_type) => {
      this.getDict('operationt_type').then((operationt_type) => {
        this.getDict('data_deal_way').then((data_deal_way) => {
          this.data_type = data_type;
          this.operationt_type = operationt_type;
          this.data_deal_way = data_deal_way;
        });
      });
    });
  },
  methods: {
    bindKey(record) {
      this.$emit('bindKey', record);
    },
    changePageSizes(pagination) {
      this.tableSourceData.records = [];
      this.forms.currPage = pagination.current;
      this.forms.pageSize = pagination.pageSize;
      this.getKeyLists();
    },
    handleResizeColumn: (w, col) => {
      col.width = w;
    },
    selectCreateTimes(e) {
      if (e) {
        this.forms.stateDate = this.dayjsFunction(e[0]);
        this.forms.lastDate = this.dayjsFunction(e[1], 'end');
      } else {
        this.forms.stateDate = this.forms.lastDate = e;
      }
    },
    selectUpdataTimes(e) {
      if (e) {
        this.forms.updateTimeStart = this.dayjsFunction(e[0]);
        this.forms.updateTimeEnd = this.dayjsFunction(e[1], 'end');
      } else {
        this.forms.updateTimeEnd = this.forms.updateTimeStart = e;
      }
    },
    dayjsFunction(time, val = 'start') {
      const monent = val == 'start' ? ' 00:00:00' : ' 23:59:59';
      return `${time.$y}-${time.$M + 1}-${time.$D}${monent}`;
    },
    getKeyLists() {
      this.spinning = true;
      this.$httpRequest(listKeyData, this.forms, 'get')
        .then((res) => {
          this.tableSourceData = res.data;
          this.spinning = false;
        })
        .catch(() => {
          this.spinning = false;
        });
    },
    getDict(name) {
      return new Promise((resolve, reject) => {
        this.$httpRequest(generalDict, { dictType: name }, 'get')
          .then((res) => {
            resolve(res);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.keyLists {
  margin-top: 50px;
}
</style>
